<template>
    <div class="wrapper">
        <el-form ref="formObj" class="main-content" :model="user" :rules="rules" label-width="100px">
            <h2 class="title">修改密码</h2>
            <el-form-item label="新密码:" prop="newPassword">
                <el-input type="password" v-model="user.newPassword" placeholder="请输入新密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="confirmPassword" >
                <el-input type="password" v-model="user.confirmPassword" placeholder="请再次输入新密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <div style="display: flex; justify-content: space-between;">
                    <el-button type="warning" @click="setPassword()" style="margin-top: 20px;margin-right: 15px; width: 45%;">修改</el-button>
                    <el-button @click="resetform()" style="margin-top: 20px; width: 45%;">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
.wrapper{
    height: 576px;
    background-color: #fff5e9;
    border-radius: 8px;
}
.main-content {
    max-width: 400px;
    max-height: 350px;
    margin: 0px auto;
    padding: 110px 40px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
}

.el-form-item {
  margin-bottom: 22px;
  width: 80%;
}

.el-button {
  width: 100%;
}
</style>


<script setup>
import { reactive,ref } from 'vue';
import { post } from '@/plugins/axios';
import VueCookie from 'vue-cookie';
import { getCookieForObject } from '@/util';
import { ElMessage } from 'element-plus';
const formObj = ref(null);
const user = reactive({
    email: '',
    newPassword: '',
    confirmPassword: ''
});
const rules={
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' },
        { validator: validateConfirmPwd, trigger: 'blur' }
    ]
}
function validateConfirmPwd(rule, value, callback) {
  if (value !== user.newPassword) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}
init()
function init(){
	const userinfo= getCookieForObject('user')
	if (userinfo) {
		for (const key in user) {
			if (Object.prototype.hasOwnProperty.call(userinfo, key)) {
				user[key] = userinfo[key];
			}
		}
	}
}
function setPassword(){
    post("/tUser/resetPassword",user, content => {
        if(content){
            resetform()
            ElMessage.success('修改成功')
        }else{
            ElMessage.error('修改失败')
        }
    },formObj)
}
function resetform(){
    user.newPassword=''
    user.confirmPassword=''
}
</script>
